<template>
  <div>
    <nav-bar1></nav-bar1>
    <div class="recommend margin-top">最新单曲</div>
    <loading v-show="!songlist.length"></loading>
    <van-swipe :autoplay="3000" :show-indicators="false">
      <van-swipe-item class="swiperitem" v-for="item in songlist" v-bind:key="item.id">
        <img
          class="banner-img"
          @click="_thisSongClick(item, index)"
          v-for="(items,index) in item"
          :key="items.index"
          :src="items.image"/>
      </van-swipe-item>
    </van-swipe>
      <ul class="disc-list">
        <li class="recommend">推荐歌单</li>
        <loading v-show="!discList.length"></loading>
        <li @click="DsicListClick(list)" v-for="(list, index) in discList" :key="index" class="disc-list-li">
          <div class="content">
            <img v-lazy="list.avatar"/>
            <div class="text">
              <p v-html="list.name.substring(0,14)"></p>
            </div>
          </div>
        </li>
      </ul>
    <tab-bar></tab-bar>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
import { getRecommend, getDiscList, getRecommendList } from 'api/recommend.js'
import {createSong} from 'api/song.js'
import {getSongVkey} from 'api/singer.js'
import { ERR_OK } from 'api/config.js'
import { Swipe, SwipeItem } from 'vant'
import tabBar from '../base/tabBar'
import loading from '../base/Loading'
import { mapMutations, mapActions } from 'vuex'
import DiscList from 'common/DiscList'
import NavBar1 from 'base/NavBar1'
export default {
  name: 'recommend',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    tabBar,
    loading,
    NavBar1
  },
  data() {
    return {
      slider: [],
      discList: [],
      songlist: [],
      false: false
    }
  },
  created() {
    this._getRecommemd()
    this._getDiscList()
    this._getRecommemdSong()
  },
  methods: {
    // 当轮播图被点击时
    _thisSongClick(item, index) {
      this.selectPlay({
        list: [...item],
        index: index
      })
    },
    DsicListClick(list) {
      this.$router.push({
        path: `/recommend/${list.id}`
      })
      this.setCurrentDsic(list)
    },
    _getRecommemdSong() {
      getRecommendList().then((res) => {
        this._resetSonglist(res.new_song.data.songlist)
      })
    },
    // 整理获取的歌曲的数据样式
    _resetSonglist(list) {
      // 定义一个promiseAll需要用到的数组
      var promises = []
      // forEach的时候把所有的promise都存入promises
      list.forEach((item) => {
        promises.push(
          getSongVkey(item.mid).then((res) => {
            let vkey = res.data.items[0].vkey
            let url = `http://dl.stream.qqmusic.qq.com/${res.data.items[0].filename}?vkey=${vkey}&guid=7175649092&uin=0&fromtag=66`
            Object.assign(item, { url })
            if (vkey !== '') {
              let song = createSong(item)
              return song
            }
          }))
      })
      // 当所有的promise都执行完后，执行Promiseall
      Promise.all(promises).then((songlist) => {
        let ret = []
        for (let i = 0; i < songlist.length; i += 3) {
          ret.push(songlist.slice(i, i + 3))
        }
        this.songlist = ret
      })
    },
    _getRecommemd() {
      getRecommend().then((res) => {
        if (res.code === ERR_OK) {
          this.slider = res.data.slider
        }
      })
    },
    _getDiscList() {
      getDiscList().then((res) => {
        if (res.code === ERR_OK) {
          this.discList = this._resetList(res.data.list.splice(0, 9))
        }
      })
    },
    _resetList(list) {
      let ret = []
      list.forEach((item) => {
        ret.push(new DiscList({
          id: item.dissid,
          name: item.dissname,
          avatar: item.imgurl
        }))
      })
      return ret
    },
    ...mapMutations({
      setCurrentDsic: 'SET_CURRENT_DSIC',
      setPlayList: 'SET_PLAYLIST'
    }),
    ...mapActions([
      'selectPlay'
    ])
  }
}
</script>

<style scoped>
  .van-swipe{
  }
  .banner-img{
    width: 30%;
    margin-left: 2.5%;
    box-shadow: 0 0 10px;
    margin-top: 5%;
    margin-bottom: 2%;
  }
  .disc-list{
    margin-bottom: 60px;
  }
  .disc-list-li{
    width: 33.3%;
    font-size: .35rem;
    line-height: .45rem;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
  }
  .disc-list-li .text{
    height: 1rem;
    overflow: hidden;
    float: left;
  }
  .content{
    width:80%;
    margin: 0 auto;
    padding-top: 10%;
  }
  .disc-list-li img{
    width: 100%;
    margin-bottom: 6%;
  }
  .recommend{
    margin-left: 4%;
    margin-top: 5%;
    font-size: .5rem;
  }
  .margin-top{
    margin-top: 60px;
  }
</style>
